<template>
    <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="com_box">
            <div class="time_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <el-popover placement="bottom-start" width="380" v-model="is_model">
                        <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                            <div class="flexbox flexcenter">
                                <img src="../../assets/img/model_icon.svg" alt="" class="select_icon">
                                <span class="select_text">{{modelCheck.name}}</span>
                            </div>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <div class="time_model">
                            <span class="tm_title font_16 color_01">模板</span>
                            <div class="yusuan_list">
                                <div class="yusuan_item flexbox flexcenter flexbetween" @click="changeModel(item,index)" :class="{'active':index==activeModel}" v-for="(item,index) in modelList" :key="index">
                                    <img src="../../assets/img/market_checked.svg" alt="" class="ys_check">
                                    <div class="font_14 color_01">{{item.name}}</div>
                                    <div class="yusuan_edit flexbox flexcenter">
                                        <span class="time_tag" v-if="item.marketing_goal == 'LIVE_PROM_GOODS'">直播带货</span>
                                        <span class="time_tag" v-else-if="item.marketing_goal == 'VIDEO_PROM_GOODS'">短视频带货</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-popover>

                    <el-select v-model="queryInfo.template_advertiser_id" @change="changeUser" placeholder="账户" style="margin-left:10px;width:285px" class="user_select">
                        <div slot="prefix" class="select_pre flexbox flexcenter">
                            <img src="../../assets/img/account_icon.svg" alt="">
                        </div>
                        <el-option label="全部" value="0" v-if="modelCheck.advertiser"></el-option>
                        <el-option :label="item.name" :value="item.template_advertiser_id" v-for="(item,index) in modelCheck.advertiser" :key="index"></el-option>
                    </el-select>
                </div>
                <el-date-picker v-model="queryInfo.date" @change="changeData" type="daterange" size="small" range-separator="-" style="width:260px" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="data_title">数据概览</div>
            <el-row :gutter="20" class="data_count">
                <el-col :span="6">
                    <div class="dc_item flexbox flexcolumn flexjust" :class="{'active':active==1}" @click="changeCount(1)">
                        <div class="dc_text">消耗</div>
                        <div class="dc_num">{{allData.stat_cost?allData.stat_cost:'0.00'}}</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="dc_item flexbox flexcolumn flexjust" :class="{'active':active==2}" @click="changeCount(2)">
                        <div class="dc_text">转化销售额</div>
                        <div class="dc_num">{{allData.stat_amount?allData.stat_amount:'0.00'}}</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="dc_item flexbox flexcolumn flexjust" :class="{'active':active==3}" @click="changeCount(3)">
                        <div class="dc_text">ROI</div>
                        <div class="dc_num">{{allData.stat_roi?allData.stat_roi:'0.00'}}</div>
                    </div>
                </el-col>
            </el-row>
            <div class="data_chart">
                <div id="timeChart" style="height:384px;"></div>
            </div>
        </div>
        <div class="com_box pd_20" style="margin-top:16px;">
            <div class="data_title" style="margin-left:0;margin-right:0">列表数据</div>
            <el-table :data="tableData" class="com_table" max-height="600">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据，请选择模板</div>
                </div>
                <el-table-column prop="date" label="时间" min-width="120">
                </el-table-column>
                <el-table-column prop="stat_cost" label="消耗" width="160">
                </el-table-column>
                <el-table-column prop="stat_amount" label="销售额" width="160">
                </el-table-column>
                <el-table-column prop="stat_roi" label="ROI" width="160">
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            is_model:false,
            modelCheck: {},
            modelList: [],
            users: [],
            active: 1,
            activeModel: null,
            allData: {},
            x_data: [],
            y_data: [],
            stat_amount: [],
            stat_cost: [],
            stat_roi: [],
            chart_text: "消耗",
            queryInfo: {
                date: [],
                template_advertiser_id: "",
                template_id: "",
                page: 1,
                limit: 20,
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        let moedel_data = JSON.parse(this.$route.query.moedel_data);
        this.modelCheck = moedel_data.modelCheck;
        this.activeModel = moedel_data.activeModel;
        this.queryInfo.template_advertiser_id =
            moedel_data.template_advertiser_id;
        this.queryInfo.template_id = moedel_data.template_id;
        this.getTimeFn();
        this.getModelList();
        this.getDataList(1);
        this.getDataChart(1);
    },
    mounted() {},
    methods: {
        getTimeFn() {
            const that = this;
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            that.queryInfo.date[0] = that.formatDate(start);
            that.queryInfo.date[1] = that.formatDate(end);
        },

        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return myyear + "-" + mymonth + "-" + myweekday;
        },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/timeinterval/dataCompare",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.allData = res.data.all_data;
                this.tableData = res.data.list_data.list;
                this.total = res.data.list_data.count;
            }
        },

        async getDataChart(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/timeinterval/dataCompare",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                let x_data = [];
                let stat_amount = [];
                let stat_cost = [];
                let stat_roi = [];
                for (let i in res.data.days_data) {
                    x_data.push(res.data.days_data[i].date);
                    stat_amount.push(res.data.days_data[i].stat_amount);
                    stat_cost.push(res.data.days_data[i].stat_cost);
                    stat_roi.push(res.data.days_data[i].stat_roi);
                }
                this.x_data = x_data;
                this.stat_amount = stat_amount;
                this.stat_cost = stat_cost;
                this.stat_roi = stat_roi;
                this.y_data = this.stat_cost.map(Number);
                this.active = 1;
                this.chart_text = "消耗";
                this.timeChart();
            }
        },

        //获取模板列表
        async getModelList() {
            const { data: res } = await this.$http.post(
                "adminapi/timeinterval/templateList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.modelList = res.data;
                if (this.activeModel) {
                    this.modelCheck = this.modelList[this.activeModel];
                }
            }
        },

        // 切换数据
        changeCount(type) {
            this.active = type;
            if (type == 1) {
                this.chart_text = "消耗";
                this.y_data = this.stat_cost.map(Number);
            } else if (type == 2) {
                this.chart_text = "转化销售额";
                this.y_data = this.stat_amount.map(Number);
            } else if (type == 3) {
                this.chart_text = "ROI";
                this.y_data = this.stat_roi.map(Number);
            }
            this.timeChart();
        },

        // 切换模板
        changeModel(item, index) {
            this.is_model = false
            this.activeModel = index;
            this.modelCheck = item;
            this.queryInfo.template_advertiser_id = "0";
            this.queryInfo.template_id = item.id;
            this.getDataList(1);
            this.getDataChart(1);
        },

        // 日期选择
        changeData() {
            this.getDataList(1);
            this.getDataChart(1);
        },

        // 账户切换
        changeUser() {
            this.getDataList(1);
            this.getDataChart(1);
        },

        // 时间曲线数据图表
        timeChart() {
            const myChart = this.$echarts.init(
                document.getElementById("timeChart")
            );
            var option = {
                color: ["#4475FF"],
                title: {},
                grid: {
                    left: "2%",
                    right: "2%",
                    bottom: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisTick: {
                        show: false,
                    },
                    data: this.x_data,
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "rgba(97, 108, 133, 0.2)",
                        },
                    },
                },
                series: [
                    {
                        smooth: true,
                        showSymbol: false,
                        name: this.chart_text,
                        type: "line",
                        data: this.y_data,
                        lineStyle: {
                            color: "#4475FF",
                            width: 3,
                            shadowColor: "rgba(162, 59, 84, 0.31)",
                            shadowBlur: 5,
                            shadowOffsetY: 2,
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.time_head {
    height: 80px;
    border-bottom: 1px solid #ebebeb;
    margin: 0 20px 20px;
}
.select_icon {
    margin-right: 10px;
}
.select_box {
    width: 260px;
}
.select_pre {
    height: 100%;
}
.time_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    padding-left: 10px;
    position: relative;
    font-weight: bold;
}
.time_title::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 12px;
    background-color: #4475ff;
    border-radius: 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.tc_text {
    font-size: 14px;
    color: #616c85;
    margin-top: 8px;
    line-height: 20px;
    height: 20px;
}
.time_rank {
    height: 70px;
}

.table_box {
    padding: 0 20px;
}
.time_model {
    padding: 8px;
}
.yusuan_list {
    margin-top: 0;
    margin-bottom: 20px;
}
.time_tag {
    padding: 0 8px;
    line-height: 21px;
    height: 21px;
    font-size: 12px;
    color: #616c85;
    border-radius: 2px;
    margin-right: 10px;
    background-color: rgba(165, 177, 209, 0.08);
}

.data_title {
    position: relative;
    font-size: 16px;
    color: #17233d;
    padding-left: 10px;
    margin: 0 20px 20px;
}
.data_title::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 12px;
    background-color: #4475ff;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.data_count {
    padding: 0 20px;
}
.dc_item {
    background-color: #f8f9fb;
    border-radius: 4px;
    height: 100px;
    padding: 0 20px;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid #f8f9fb;
}
.dc_item.active {
    background-color: rgba(68, 117, 255, 0.08);
    border: 2px solid #4475ff;
}
.dc_text {
    font-size: 14px;
    color: #616c85;
}
.dc_num {
    font-size: 20px;
    color: #17233d;
    margin-top: 8px;
    font-family: D-DIN;
    font-weight: bold;
}
</style>


